Questions
3 of 30
1How can you centre text vertically and horizontally inside a box?
2What is the use of the white-space property?
3How can you truncate text with an ellipsis (...) in CSS?
4How do you wrap or prevent wrapping of text in a container?
5How do you make text responsive across different screen sizes?
6How do you justify text using CSS?
7What does text-shadow do? Give an example.
8How can you apply multiple shadows to text?
9How do you apply gradients to text in CSS?
10How do you control text overflow in a fixed-width container?
11What is the difference between em, rem, and px when styling text?
12How does font-weight differ from <b> tag in semantic meaning?
13How does accessibility relate to text formatting in HTML?
14What’s the difference between semantic and non-semantic text formatting tags?
15How can you ensure consistent text appearance across different browsers?
16What is the difference between font-style, font-variant, and font-weight?
17What is the role of @font-face in web typography?
18How can you import custom fonts in CSS?
19What’s the impact of using web fonts on performance?
20How can you optimise text rendering for readability?
21How do you make text appear vertically (top-to-bottom) using CSS?
22How do you style only the first letter or first line of a paragraph?
23How do you create a drop cap effect?
24How can you highlight a selected text range dynamically?
25How do you make text glow or have a neon effect using CSS?
26What CSS properties can you use for text animations?
27How can you apply a gradient background only to the text and not the entire element?
28How can you apply different styles to different words in the same line?
29How do you prevent text selection on a webpage?
30How do you implement responsive typography (fluid text size)?
CSSCSS
Basics
Selectors
Box model
Text formatters
Positioning
Pseudo classes
Pseudo elements
Flexbox
Grid
Display
Combinators
Overflow
Breakpoint
Transformation and Transition
Frameworks
Everything else
03 / 30

How can you truncate text with an ellipsis (...) in CSS?

Truncating Text with Ellipsis in CSS

CSS provides a way to truncate overflowing text and display an ellipsis (...) using a combination of properties. This is especially useful for fixed-width containers or UI elements like cards, buttons, or table cells.

Required CSS Properties
  1. 1

    white-space: nowrap; – Prevents text from wrapping to a new line.

  2. 2

    overflow: hidden; – Hides any text that overflows the container.

  3. 3

    text-overflow: ellipsis; – Displays an ellipsis (…) for the clipped text.

Example: Single-Line Ellipsis

In this example, any text exceeding 200px will be truncated with an ellipsis. The nowrap ensures the text stays on a single line, while overflow: hidden hides the extra text.

Optional Enhancements
  1. 1

    For multi-line ellipsis, use display: -webkit-box;, -webkit-line-clamp: N; and -webkit-box-orient: vertical; along with overflow: hidden.

  2. 2

    Ensure the container has a fixed width for the ellipsis to appear correctly.

  3. 3

    Combine with title attribute on the element to show full text on hover for better accessibility.

Example: Multi-Line Ellipsis
Key Takeaways
  1. 1

    Use text-overflow: ellipsis for clean truncation in single-line text.

  2. 2

    Combine with nowrap and overflow: hidden for proper effect.

  3. 3

    Multi-line truncation requires -webkit-line-clamp and flexbox-like behavior.

  4. 4

    Always provide a way to see full text, such as tooltips or expandable sections, for accessibility.